<!-- 分页结果 -->
<!--分页-->
<template>
  <div class="margin-top-20 page-result">
    <!--<el-card class="margin-top-20" v-for="i in 7" :key="i">-->
<!---->
<el-card class="margin-top-20">         
      <div style="display: flex; justify-content: flex-end width:60px;height:70px"><!--留-->
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        ><!--留-->  
                     
      <table class="total-table">
          <tr>
            <td style="width:80px;">排行榜</td>
            
            <td style="width:480px;">视频信息</td>
            
            <td style="width:85px;">新增播放</td>
            
            <td style="width:85px;">新增点赞</td>
            
            <td style="width:85px;">新增收藏</td>
            
            <td style="width:85px;">新增评论</td>
            
            <td style="width:85px;">新增投币</td>
            
            <td>操作</td>

          </tr>
        </table>
      </div>     
      </div>            
    </el-card>

<!---->
    <el-card class="margin-top-20">          
      <div style="display: flex; justify-content: flex-end">
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        >
        
          <div style="display: flex; justify-content: flex-start">
            
            <div class="up-info__avatar" >
              <div>
                  <table>
                    <tr>
               
                  <td style="height:60px;">1</td>
                  
                
                  <td style="width:20px;height:60px;">New</td>

              

              <a href="#" target="_blank">
                  <img
                  src="@/assets/images/12.jpg"
                  
                  width="150px"
                  height="120px"
                  style="margin-leif:150px;"
                />
              </a>
              <div class="time">03:13</div>
                    </tr>
                  </table>
              
              </div>
            </div>
          
            <div class="up-info__info"  >
              <div>
                <span class="font-bolder" >1.4W买了一个超大西瓜，150斤比人还重</span>
              </div>
              <div><span>简介</span><span>小翔哥的水果第一名肯定就是西瓜啦...</span></div>
              <div class="info-list-name">
                小翔哥 | 2021-6-16 16:44:35 发布
              </div>
              <div class="tagList">
                <div class="tag">美食</div>
                <div class="tag">西瓜</div>
                <div class="tag">小翔哥</div>
                <div class="tag">水果</div>
                <div class="tag">心生好奇</div>
              </div>
            </div>
        </div>

      <table class="total-table">

          <tr>
            <td style="width:70px;height:60px;">新增</td>
            <td style="width:85px;">205.9W</td>
            <td style="width:85px;">13.6W</td>
            <td style="width:85px;">6898</td>
            <td style="width:85px;">3998</td>
            <td style="width:85px;">3.5W</td>
            <td rowspan="5"><router-link :to="{path:'/search/video'}"><el-button type="success">详情</el-button></router-link></td>
          </tr>

          <tr>
            <th>  </th>
            <th>  </th>
            <th>  </th>
            <th>  </th>
            <th>  </th>
            <th>  </th>
          </tr>

          <tr>
            <td>总数</td>
            <td>215.9W</td>
            <td>15.6W</td>
            <td>7831</td>
            <td>4837</td>
            <td>3.7W</td>
            
          </tr>
        </table>
      </div>     
      </div>             
    </el-card>
<!--分页2-->
<el-card class="margin-top-20">
         
      <div style="display: flex; justify-content: flex-end">
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        >
           <div style="display: flex; justify-content: flex-start">
            
            <div class="up-info__avatar" >
              <table>

                <tr>
                  <td style="height:60px;">2</td>
                
                
                  <td style="width:20px;height:60px;">New</td>
               

              

              <a href="#" target="_blank">
                  <img
                  src="@/assets/images/14.jpg"
                  
                  width="150px"
                  height="120px"
                  style="margin-leif:150px;"
                />
              </a>
              <div class="time">01:13</div>
               </tr>
              
              </table>
            </div>
            <div class="up-info__info">
              <div>
                <span class="font-bolder">孙一宁她急了，王思聪也急了</span>
              </div>
              <div><span>简介</span><span>微博 太哈人了</span></div>
              <div class="info-list-name">
                孙一宁 | 2021-6-15 22:38:12 发布
              </div>
              <div class="tagList">
                <div class="tag">生活</div>
                <div class="tag">孙一宁</div>
                <div class="tag">王思聪</div>
                <div class="tag">急了</div>
                <div class="tag">网红</div>
              </div>
            </div>
        </div>
                     
      <table class="total-table">
        <tr Onclick="test('详情')">
            <td style="width:70px;height:60px;">新增</td>
            <td style="width:85px;">194.9W</td>
            <td style="width:85px;">3.1W</td>
            <td style="width:85px;">4950</td>
            <td style="width:85px;">8731</td>
            <td style="width:85px;">647</td>
            <td rowspan="5"><router-link :to="{path:'/search/video'}"><el-button type="success">详情</el-button></router-link></td>
          </tr>

          <tr>
            <th>  </th>
            <th>  </th>
            <th>  </th>
            <th>  </th>
            <th>  </th>
            <th>  </th>
          </tr>

          <tr>
            <td>总数</td>
            <td>221.9W</td>
            <td>3.3W</td>
            <td>4994</td>
            <td>1.0W</td>
            <td>699</td>
            
          </tr>          
        </table>
      </div>     
      </div>             
    </el-card>
<!--S分页3-->
<el-card class="margin-top-20">
         
      <div style="display: flex; justify-content: flex-end">
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        >
           <div style="display: flex; justify-content: flex-start">
            
            <div class="up-info__avatar" >
              <table>

                <tr>
                  <td style="height:60px;">3</td>
                
                
                  <td style="width:20px;height:60px;">New</td>
               

              

              <a href="#" target="_blank">
                  <img
                  src="@/assets/images/13.jpg"
                  
                  width="150px"
                  height="120px"
                  style="margin-leif:150px;"
                />
              </a>
              <div class="time">02:10</div>
               </tr>
              
              </table>
            </div>
          
            <div class="up-info__info">
              <div>
                <span class="font-bolder">情景再现，王思聪被女网红怼的...</span>
              </div>
              <div><span>简介</span><span>感谢王思聪让我体验了一把富二代撩妹...</span></div>
              <div class="info-list-name">
                郭本尼 | 2021-6-16 00:26:33 发布
              </div>
              <div class="tagList">
                <div class="tag">娱乐</div>
                <div class="tag">王思聪</div>
                <div class="tag">女网红怼</div>
                <div class="tag">富二代</div>
                <div class="tag">撩妹</div>
              </div>
            </div>
        </div>
                     
      <table class="total-table">
        <tr>
            <td style="width:70px;height:60px;">新增</td>
            <td style="width:85px;">187.9W</td>
            <td style="width:85px;">6.2W</td>
            <td style="width:85px;">2.0W</td>
            <td style="width:85px;">1.1W</td>
            <td style="width:85px;">2.2W</td>
            <!--<td rowspan="5"><router-link :to="{path:'/search/video'}">详情</router-link></td>-->
            <td rowspan="5"><router-link :to="{path:'/search/video'}"><el-button type="success">详情</el-button></router-link></td>
          </tr>

          <tr>
            <th>  </th>
            <th>  </th>
            <th>  </th>
            <th>  </th>
            <th>  </th>
            <th>  </th>
          </tr>

          <tr>
            <td>总数</td>
            <td>281.9W</td>
            <td>10.6W</td>
            <td>2.8W</td>
            <td>1.7W</td>
            <td>3.3W</td>
            
          </tr>         
        </table>
      </div>     
      </div>             
    </el-card>
<!--E分页3-->

<!--S分页4-->
<el-card class="margin-top-20">
         
      <div style="display: flex; justify-content: flex-end">
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        >
          <div style="display: flex; justify-content: flex-start">
            
            <div class="up-info__avatar" >
              <table>

                <tr>
                  <td style="height:60px;">4</td>
                
                
                  <td style="width:20px;height:60px;">New</td>
               

              

              <a href="#" target="_blank">
                  <img
                  src="@/assets/images/15.jpg"
                  
                  width="150px"
                  height="120px"
                  style="margin-leif:150px;"
                />
              </a>
              <div class="time">07:13</div>
               </tr>
              
              </table>
            </div>
          
            <div class="up-info__info">
              <div>
                <span class="font-bolder">【唐诗逸x萨顶顶】舞若游龙，音如天籁...</span>
              </div>
              <div><span>简介</span><span>创作类型：原创编舞 舞者：唐诗逸 编舞...</span></div>
              <div class="info-list-name">
                斯饼饼 | 2021-6-16 13:52:3 发布
              </div>
              <div class="tagList">
                <div class="tag">唐诗逸</div>
                <div class="tag">萨顶顶</div>
                <div class="tag">国家队</div>
                <div class="tag">舞蹈</div>
                <div class="tag">舞者</div>
              </div>
            </div>
        </div>
                     
      <table class="total-table">
        <tr>
            <td style="width:70px;height:60px;">新增</td>
            <td style="width:85px;">168.9W</td>
            <td style="width:85px;">9.6W</td>
            <td style="width:85px;">4.9W</td>
            <td style="width:85px;">2427</td>
            <td style="width:85px;">4.9W</td>
    
            <td rowspan="5"><router-link :to="{path:'/search/video'}"><el-button type="success">详情</el-button></router-link></td>
            
          </tr>

          <tr>
            <th>  </th>
            <th>  </th>
            <th>  </th>
            <th>  </th>
            <th>  </th>
            <th>  </th>
          </tr>

          <tr>
            <td>总数</td>
            <td>172.9W</td>
            <td>9.9W</td>
            <td>5.0W</td>
            <td>2649</td>
            <td>5.2W</td>
            
          </tr>

          
        </table>

      </div>     
      </div>          
   
    </el-card>
<!--E分页4-->

<!--s分页5-->
<el-card class="margin-top-20">
         
      <div style="display: flex; justify-content: flex-end">
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        >
           <div style="display: flex; justify-content: flex-start">
            
            <div class="up-info__avatar" >
              <table>

                <tr>
                  <td style="height:60px;">5</td>
                
                
                  <td style="width:20px;height:60px;">New</td>
               

              

              <a href="#" target="_blank">
                  <img
                  src="@/assets/images/16.jpg"
                  
                  width="150px"
                  height="120px"
                  style="margin-leif:150px;"
                />
              </a>
              <div class="time">04:13</div>
               </tr>
              
              </table>
            </div>
          
            <div class="up-info__info">
              <div>
                <span class="font-bolder">花整整一周时间制作梦寐以求的脆皮烤鸡...</span>
              </div>
              <div><span>简介</span><span>这期真的超累 求个三连 谢谢谢谢谢谢</span></div>
              <div class="info-list-name">
                西姆 | 2021-6-16 17:30:17 发布
              </div>
              <div class="tagList">
                <div class="tag">美食</div>
                <div class="tag">抽象</div>
                <div class="tag">美食圈</div>
                <div class="tag">脆皮烤鸡</div>
                <div class="tag">帅小伙</div>
              </div>
            </div>
        </div>
                     
      <table class="total-table">
        <tr onclick="test('详情')">
            <td style="width:70px;height:60px;">新增</td>
            <td style="width:85px;">135.5W</td>
            <td style="width:85px;">20.9W</td>
            <td style="width:85px;">2.6W</td>
            <td style="width:85px;">1752</td>
            <td style="width:85px;">13.3W</td>
            
            <td rowspan="5"><router-link :to="{path:'/search/video'}"><el-button type="success">详情</el-button></router-link></td>
          </tr>

          <tr>
            <th>  </th>
            <th>  </th>
            <th>  </th>
            <th>  </th>
            <th>  </th>
            <th>  </th>
          </tr>

          <tr>
            <td>总数</td>
            <td>147.9W</td>
            <td>23.6W</td>
            <td>2.8W</td>
            <td>2807</td>
            <td>15.1W</td>
            
          </tr>          
        </table>

      </div>     
      </div>          
       </el-card>

<!--e分页5-->

  </div>
</template>

<script type="text/javascript">
function test(){
  window.location.href='CoreList'
  //canshu='test';
}
export default {
  name: "",
  data: function () {
    return {};
  },

 

  components: {},

  computed: {},

  mounted: function () {},

  methods: {
    hrefClick(){
      window.open("http://localhost:22222/#/rank/hotVideo/CoreList");
    }
  },
};
</script>
<style lang="scss" scoped>
.page-result {
  height: 1000px;

  .column-1px {
    border-left: 1px solid #f6f7fb;
    margin: 0 20px;
    height: 120px;
  }
  .up-info__avatar {
    width: 184px;
    height: 115px;
    position: relative;

    margin-right: 16px;
    border-radius: 2px;
    text-align: center;

    .time {
      color: #999;
      margin-top: 10px;
      display: block;
      width: 39px;
      height: 17px;
      background: #000;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 2px 0 2px 0;
      color: #fff;
      font-size: 12px;
      text-align: center;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
  .up-info__info {
    height: 120px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    margin-left: 10px;
    .info-list-name {
    }
    .tagList {
      text-align: left;
      display: flex;
      flex-wrap: wrap;
      margin-right: -4px;
      .tag {
        color: #909399;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        margin-right: 4px;
        margin-bottom: 4px;
        text-align: center;
        padding: 1px 3px;
      }
      .el-button--success{
        background: rgb(255, 182, 231);
      }
    }
  }
}
</style>
